/*
 * @Author: Zhang Kai
 * @Date: 2021-11-05 18:30:03
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2021-11-05 18:47:37
 * @FilePath: /metricsx-standard-ui/src/components/Step/index.tsx
 */
import { defineComponent, ref } from 'vue';
import '../Step/index.scss';
const Step = defineComponent({
  name: 'Step',
  props: {
    stepList: {
      type: Array,
      default: () => [
        {
          label: '步骤一',
          value: 1
        },
        {
          label: '步骤二',
          value: 2
        }
      ]
    },
    activeIndex: {
      type: Number,
      default: 1
    }
  },
  setup(props, { slots, attrs, emit }) {
    return () => {
      const { stepList, activeIndex } = props;
      return (
        <div class="step-list">
          <ul>
            {stepList?.map((v: any) => (
              <li
                class={[
                  {
                    'step-active':
                      activeIndex === v.value || v.value <= activeIndex
                  }
                ]}
              >
                {v.label}
              </li>
            ))}
          </ul>
        </div>
      );
    };
  }
});
export default Step;
